<template>
	<view class="content ">
		<top-userinfo :userusername="userusername" ref="topuserinfo" :parentData="false"></top-userinfo>
		<!-- <view class="my-shop-hd">
			<view class="user-info">
				<uni-list :border="false">
					<uni-list-chat :avatar-circle="true" title="董嘎嘎" avatar="/static/img/img.png" note="18661899000"></uni-list-chat>
				</uni-list>
			</view>
			<view class="my-card">
				<view class="my-card-icon">
					<uni-icons type="vip" size="30"></uni-icons>
				</view>
				<view class="my-card-info">
					<text>我的超级抵现卡</text>
				</view>
				<navigator class="instructions" url="privilege_statement">特权使用说明</navigator>
			</view>
		</view> -->
		<uni-list>
			<uni-list-item thumb="/static/img/module_icon/hexiao_cishu.png" thumb-size="lg"
			title="累计核销次数" :note="listtotal" />
		</uni-list>
		<view class="uni-padding-wrap">
			<view class="uni-flex uni-row bg-radius">
				<view class="flex-item">
					<picker mode="date" :value="date" @change="bindDateChange">
						<view class="uni-date">{{date}}</view>
					</picker>
				</view>
				<view class="flex-item">
					<view class="view-all" @click="getall"><uni-icons type="list" size="16" color="#000"></uni-icons> 查看所有</view>
				</view>
			</view>
			<scroll-view
			            class="dialogue-box"
			            style="height: 78vh"
			            :scroll-y="true"
			            :refresher-threshold="10"
			            :scroll-top="scrollTop"
			            @scrolltolower="handelLower"
			            :refresher-enabled="isLoadingTop"
			            :refresher-triggered="isTriggeredTop"
			            @refresherrefresh="handleRefresher"
			            @refresherrestore="handelonRestore"
			          >
				<view class="bg-radius" v-for="(item,index) in listarr" :key="index">
					<!-- <uni-section :title="'核销时间：'+item.createtime"></uni-section> -->
					<uni-row class="con-list">
						<uni-col :span="17" class="con-price">
							<view><text>卡名称：</text>{{item.card_name}}</view>
						</uni-col>
						<uni-col :span="7" class="con-time">
							<!-- <view>
								<text>核销时间：</text>
								{{newdate(item.create_time)}}
							</view> --> 
							<view class="datetimes">
								<text>{{newdate(item.create_time,3)}}</text>
								<text>{{newdate(item.create_time,2)}}</text>
							</view>
							<!-- <text v-if="item.card.status == 1">已核销</text>
							<text v-else>未核销</text> -->
						</uni-col>
					</uni-row>
					
					<!-- <uni-section :title="'用户信息：'+item.realname+'  '+item.mobile"></uni-section> -->
				</view>
				<uni-load-more :status="status" />
			</scroll-view>
			<!-- <view class="bg-radius">
				<uni-section title="核销时间：2024-10-10 22:30:29"></uni-section>
				<uni-row class="con-list">
					<uni-col :span="7" class="con-time">
						<text>土豆丝季卡</text>
					</uni-col>
					<uni-col :span="17" class="con-price uni-center">
						<text>已核销</text>
					</uni-col>
				</uni-row>
				<uni-section title="用户信息：董嘎嘎 18661899000"></uni-section>
			</view> -->
			
		</view>
		
			
		
	</view>
</template>
<script>
	// 
	import {userwrite_off_record} from "@/api/apiinfo";
	import {timestampToTemplatethoer,timestampToTemplate} from "@/utils/validate.js"
	import topuserinfo from './../../components/top_userinfo.vue';
	export default {
		components:{
			"top-userinfo":topuserinfo
		},
	    data() {
			const currentDate = this.getDate({
				format: true
			});
	        return {
				date: currentDate,
				status: 'more',
				scrollTop: "50px",
				loadings: "加载中。。。", //more/loading/noMore
				isLoadingTop: true,
				isTriggeredTop: true,				
				pagenumber:1,
				listtotal:'0',
				listarr:[],
				shopid:'',
				userusername:'',
				getdate:''
	        };
	    },
		mounted() { ////////////////// uni组件样式重定义
		
			// var str = document.getElementsByClassName("uni-list-chat__header-image");
			// Array.prototype.forEach.call(str, function(headerImage){
			// 	headerImage.style.margin = "0";
			// });
			// var str = document.getElementsByClassName("uni-list-chat__content-title");
			// Array.prototype.forEach.call(str, function(contentTitle){
			// 	contentTitle.style.color = "#fff";
			// });
			// var str = document.getElementsByClassName("uni-list-chat__content-note");
			// Array.prototype.forEach.call(str, function(contentNote){
			// 	contentNote.style.color = "#fff";
			// });
			
		// 	var str = document.getElementsByClassName("uni-list-item");
		// 	Array.prototype.forEach.call(str, function(listItem){
		// 		listItem.style.backgroundColor = "transparent";
		// 	});
		// 	var str = document.getElementsByClassName("uni-list--border-bottom");
		// 	Array.prototype.forEach.call(str, function(borderBottom){
		// 		borderBottom.style.display = "none";
		// 	});
		
		// 	var str = document.getElementsByClassName("uni-list-item__icon-img");
		// 	Array.prototype.forEach.call(str, function(item){
		// 		item.style.marginRight = "0";
		// 	});
		// 	var str = document.getElementsByClassName("uni-list-item__content-note");
		// 	Array.prototype.forEach.call(str, function(item){
		// 		item.style.fontSize = "14px";
		// 		item.style.color = "#000";
		// 		item.style.fontWeight = "700"
		// 	});
			
		// 	var str = document.getElementsByClassName("uni-section-header");
		// 	Array.prototype.forEach.call(str, function(sectionheader){
		// 		sectionheader.style.padding = "0";
		// 	});
		// 	var str = document.getElementsByClassName("distraction");
		// 	Array.prototype.forEach.call(str, function(distraction){
		// 		distraction.style.fontSize = "12px";
		// 	});
				
		},
		onLoad(option) {
			// let user_name = localStorage.getItem('username')
			// if(user_name == '' || user_name == null){
			// 	user_name = localStorage.getItem('nickname')
			// }
			// this.userusername = user_name;
			// this.shopid = this.$route.query.id;
			this.shopid = JSON.parse(decodeURIComponent(option.id))//this.$route.query.id;
			this.$nextTick(() => {
			    this.$refs.topuserinfo.getuserreload()
			});
			this.getuserwrite_off_record(this.shopid,this.pagenumber)
		},
	    methods: {
			newdate(times,typenum){//时间戳转换时间格式
				// return timestampToTemplate(times,1)
				return timestampToTemplatethoer(times * 1000,typenum)
			},
			getall(){
				this.pagenumber = 1
				this.getdate = ''
				this.getuserwrite_off_record(this.shopid,this.pagenumber)
			},
			getuserwrite_off_record(id,page,load) { //查看所有会员核销记录
				this.status = 'loading'
				let data = {date:this.getdate}//
				userwrite_off_record(id,page,data).then((res) => {
					console.log("获取自己在指定商店的核销流水接口返回数据：")
					
					this.listtotal = String(res.data.total) ;
					// this.topsum = res.data.sum.toString();
					console.log(JSON.stringify(res));
					if(res.data.list.length<=0 && page==1){
						this.listarr = []
						this.status = 'noMore'
					}else{
						if(load){
							if (res.data.list && res.data.list.length == 0) {
								uni.hideLoading();
								uni.showToast({
									title: '没有更多了',
									duration: 2000
								});
								this.status = 'noMore'
								this.pagenumber -= 1;
							} else {
								this.listarr = this.listarr.concat(res.data.list);
								uni.hideLoading();
								this.status = 'more'
							}
						}else{
							if(res.data.list.length >=1){
								this.listarr = res.data.list
								this.status = 'more'
								uni.hideLoading();
							}else{
								this.status = 'noMore'
							}
						}
					}
					console.log(JSON.stringify(this.listarr));
				}).catch(err => {
					console.log(JSON.stringify(err))
					this.status = 'noMore'
					if(Object.keys(err).length === 0){
						console.log('空')
					}else if(err.msg){
						uni.showModal({
							title: '提示',
							content: '数据接口报错：'+err.msg,
							showCancel: false,
							success: function (res) {
								if (res.confirm) {
									// uni.switchTab({ //内部页面跳转方式 
									// 	url: '/pages/shop/shop'
									// })
								} 
							}
						});
					}
					
				})
			},
			// onChange(e) {
			// 	this.status = e.detail.value
			// },
			
			handelLower() {
				console.log("滚动到底部>>>");
				if (this.status == "loading") return;
			  	 if (!this.status == "noMore") return;
			  	  
			  	this.pagenumber += 1;
			  
				this.getuserwrite_off_record(this.shopid,this.pagenumber, true)
			},
			handleRefresher() {
			  console.log("顶部下拉刷新s>>>", this.isLoadingTop, this.isTriggeredTop);
			  this.isLoadingTop = true;
			  this.isTriggeredTop = true;
			  if (!this.isLoadingTop) return;
			  this.pagenumber = 1
			  // this.$store.commit("setShipGuids", "");
			  this.getuserwrite_off_record(this.shopid,this.pagenumber)
			  this.isLoadingTop = false;
			  this.isTriggeredTop = false;
			},
			handelonRestore() {
			  console.log("handelonRestore>>>");
			  this.isLoadingTop = true;
			},
			bindDateChange: function(e) {
				console.log(e)
			    this.date = e.detail.value
				this.getdate = this.date
				this.pagenumber = 1
				this.getuserwrite_off_record(this.shopid,this.pagenumber)
			},
			getDate(type) {
			    const date = new Date();
			    let year = date.getFullYear();
			    let month = date.getMonth() + 1;
			    let day = date.getDate();
				  
			    if (type === 'start') {
			        year = year - 60;
			    } else if (type === 'end') {
			        year = year + 2;
			    }
			    month = month > 9 ? month : '0' + month;
			    day = day > 9 ? day : '0' + day;
			    return `${year}-${month}-${day}`;
			}
			
	    }
	}
</script>

<style lang="scss">
	.content{
		position: relative;
		.bg-radius{
			border-radius: 20rpx;
			box-sizing: border-box;
			margin-top: 30rpx;
			padding: 30rpx;
			box-shadow: 0 0 16rpx rgba(0, 0, 0, .05);
			background-color: #fff;
		}
		
		.uni-list{
			&::after{
				display: none;
			}
		}
		.uni-date{
			font-size: 28rpx;
			color: #000;
			padding: 6rpx 0;
			background-color: transparent;
		}
		.flex-item:first-child{
			width: 70%;
		}
		.flex-item:last-child{
			width: 30%;
		}
		.view-all{
			text-align: right;
			text-align: center;
			display: block;
			font-size: 28rpx;
			padding: 4rpx ;
			color: #000;
			border: 1px solid rgba(0, 0, 0, .2);
			border-radius: 8rpx;
		}
		
		
	}
	
	.uni-list{
		background-color: transparent;
	}
	
	.con-list{
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 28rpx;
		// margin: 10rpx 0;
		// padding: 10rpx 0;
		// border-top: 1px solid #eee;
		// border-bottom: 1px solid #eee;
		
		.con-time,.con-price{
			// text{
			// 	display: inline-block;
			// 	width: 120rpx;
			// 	text-align: right;
			// }
		}
		.con-time{
			text-align: center;
			color: #999;
			text{
				font-weight: normal;
				font-size: 24rpx;
			}
		}
		.con-price{
			color: #000;
			font-weight: normal;
			// text-align: right;
			font-size: 24rpx;
			
		}
	}
	
	.uni-list-item{
			background-color: transparent !important
		}
		.uni-list--border-bottom{
			display: none !important
		}
		.uni-list-item__icon-img{
			margin-right: 0 !important;
		}
		.uni-list-item__content-note{
			font-size: 14px !important;
			color: #000 !important;
			font-weight: 700 !important;
		}
		.uni-section-header{
			display: 0 !important
		}
		.distraction{
			font-size: 12px !important;
		}
		.datetimes{
			font-size: 28rpx;
			text{
				display: block;
			}
		}
</style>